﻿<style>
    body {
        overflow-y: auto;
    }

    #footer {
        position: static;
    }

    .container-fluid {
        padding: 0;
        background: #F0F0F0;
    }

    .DMS_conter {
        display: flex;
        justify-content: space-around;
    }

    .no-data {
        border: 2px dashed #dedede;
        margin: 0 15px;
        background: #fff;
    }

        .no-data .content {
            padding: 20px 30px;
        }
</style>

<div id="vue_checkout" class="container-fluid">
    <div class="DMS_conter">
        <div class="DMS_right">
            <h4>
                <span style="color:black;margin-left:5px;">To do list</span>
                <span class="badge badge-secondary">{{myToDoCount}}</span>
            </h4>
            <div class="no-data" v-if="myToDoCount==0">
                <div class="content">
                    <img src="/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=c8d82c1e-e5b1-41e0-97b2-a864c3fd1188">
                    <h6>The content you’ve to do task will list here</h6>
                    <p>
                        
                    </p>
                </div>
            </div>
            <table class="table" v-else>
                <tr v-for="item in dataMyToDoList">
                    <td><img v-bind:src="getDocumentIcon(item.DocumentType)" height="30" width="30" /></td>
                    <td><a v-bind:href="'/pwccnhk/gtsventure/vForm/Document/Preview/'+item._id" target="_blank">{{item.Title}}</a></td>
                </tr>
                <tr style="text-align:center;" v-if="myToDoCount>dataMyToDoList.length">
                    <td colspan="2"><a class="btn btn-primary" v-on:click="showMoreTodoList">Show more</a></td>
                </tr>
            </table>
        </div>
        <div class="DMS_right">
            <h4>
                <span style="color:black;margin-left:5px;">My Checkout Content</span>
                <span class="badge badge-secondary">{{myCheckOutCount}}</span>
            </h4>
            <div class="no-data" v-if="myCheckOutCount==0">
                <div class="content">
                    <img src="/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=c8d82c1e-e5b1-41e0-97b2-a864c3fd1188">
                    <h6>The content you’ve checked out will list here</h6>
                    <p>
                        If you want to make changes to a content and you want to make sure no one else can edit it, check out the content. When you finish editing and check in the content into the system, other people can see your changes and edit the content,
                        if they have permission.
                    </p>
                </div>
            </div>
            <table class="table" v-else>
                <tr v-for="item in dataMyCheckoutList">
                    <td><img v-bind:src="getDocumentIcon(item.DocumentType)" height="30" width="30" /></td>
                    <td><a v-bind:href="'/pwccnhk/gtsventure/vForm/Document/Edit/'+item._id" target="_blank">{{item.Title}}</a></td>
                </tr>
                <tr style="text-align:center;" v-if="myCheckOutCount>dataMyCheckoutList.length">
                    <td colspan="2"><a class="btn btn-primary" v-on:click="showMoreCheckOut">Show more</a></td>
                </tr>
            </table>
        </div>
    </div>
</div>
<script src="/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=fb2e3700-1f29-4611-889b-5ce7c18cb955"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_checkout',
        data: {
            staffCode: CustomCodeResultData.CurrentUser.UserInfo.StaffCode,
            dataMyCheckoutList: [],
            myCheckOutCount: 0,
            myCheckOutIndex: 0,
            dataMyToDoList: [],
            myToDoCount: 0,
            myToDoIndex: 0
        },
        methods: {
            getMyCheckOut: function () {
                var url = "https://appcnhkdm450.digitalmaker.asia.pwcinternal.com/pwccnhk/gtsventure/customapi/RetrieveQueryDocs";
                var Jsondata = {};
                Jsondata.Token = "";
                Jsondata.EntityName = "q10z7uxi3ad";
                Jsondata.Size = 15;
                Jsondata.Index = this.myCheckOutIndex == 0 ? 0 : this.myCheckOutIndex * 15 - 1;
                var searchItem = [];
                searchItem.push({
                    Method: "And",
                    Operator: "Equal",
                    Name: "CheckStatus",
                    Value: "Checked Out"
                });
                searchItem.push({
                    Method: "And",
                    Operator: "Equal",
                    Name: "CheckCreatorId",
                    Value: this.staffCode
                });
                searchItem.push({
                    Method: "And",
                    Operator: "Equal",
                    Name: "IsDeleted",
                    Value: 0
                });
                Jsondata.SearchItem = searchItem;
                Jsondata.Order = {
                    "C4-ModifyDate": "Descending"
                };
                Jsondata.Columns = ["Title", "DocumentType", "C4-CreateDate", "C4-CreateBy"];
                $.post(url, Jsondata, function (response) {
                    if (response.StatusCode == 200) {
                        vm.$data.myCheckOutCount = response.Data.total;
                        if (Jsondata.Index == 0) {
                            vm.$data.dataMyCheckoutList = response.Data.rows;
                        } else {
                            $.each(response.Data.rows, function (index, item) {
                                vm.$data.dataMyCheckoutList.push(item);
                            });
                        }
                    }
                });
            },
            showMoreCheckOut: function () {
                this.myCheckOutIndex += 1;
                vm.getMyCheckOut();
            },
            getTodoList: function () {
                var url = "https://appcnhkdm450.digitalmaker.asia.pwcinternal.com/pwccnhk/gtsventure/customapi/RetrieveQueryDocs";
                var Jsondata = {};
                Jsondata.Token = "";
                Jsondata.EntityName = "q10z7uxi3ad";
                Jsondata.Size = 20;
                Jsondata.Index = this.myToDoIndex == 0 ? 0 : this.myToDoIndex * 20 - 1;
                var searchItem = [];
                searchItem.push({
                    Method: "And",
                    Operator: "Equal",
                    Name: "C4-CurrentWorkflowUser",
                    Value: this.staffCode
                });
                searchItem.push({
                    Method: "And",
                    Operator: "NotEqual",
                    Name: "C4-WorkflowStateDisplayName",
                    Value: "Draft"
                });
                searchItem.push({
                    Method: "And",
                    Operator: "NotEqual",
                    Name: "C4-WorkflowStateDisplayName",
                    Value: "Published"
                });

                Jsondata.SearchItem = searchItem;
                Jsondata.Order = {
                    "C4-ModifyDate": "Descending"
                };
                Jsondata.Columns = ["Title", "DocumentType", "C4-CreateDate", "C4-CreateBy"];
                $.post(url, Jsondata, function (response) {
                    if (response.StatusCode == 200) {
                        vm.$data.myToDoCount = response.Data.total;
                        if (Jsondata.Index == 0) {
                            vm.$data.dataMyToDoList = response.Data.rows;
                        } else {
                            $.each(response.Data.rows, function (index, item) {
                                vm.$data.dataMyToDoList.push(item);
                            });
                        }
                    }
                });
            },
            showMoreTodoList: function () {
                this.myToDoIndex += 1;
                vm.getTodoList();
            },
            getDocumentIcon: function (type) {
                var url = "";
                switch (type.toLowerCase()) {
                    case "bmp":
                        url = "/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=50495759-ebb8-417c-82c3-2a8ebaff0d1a";
                        break;
                    case "doc":
                        url = "/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=15c2fd97-056e-4a1c-a783-00ed66548194";
                        break;
                    case "docx":
                        url = "/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=05ac3efa-7988-4d0d-8837-2350ae7da275";
                        break;
                    case "gif":
                        url = "/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=6b33b954-5d40-4b18-b402-4a02ce99b905";
                        break;
                    case "jpeg":
                        url = "/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=68570012-373f-4066-a337-1396cea85dc1";
                        break;
                    case "jpg":
                        url = "/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=cf34ce35-c4a0-4d98-9c0c-cefbbe727f24";
                        break;
                    case "pdf":
                        url = "/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=c9dca41e-daa7-4877-9022-7c4070c83f22";
                        break;
                    case "ppt":
                        url = "/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=f28a28e4-c5e8-4268-9c4b-cbebf051c02b";
                        break;
                    case "pptx":
                        url = "/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=f31d224f-fa15-4925-abb2-087656ebb94b";
                        break;
                    case "psd":
                        url = "/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=884bc4c5-2867-423f-8270-28b00947f780";
                        break;
                    case "tif":
                        url = "/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=dc5a5367-2617-4283-90c8-af606faf5ac2";
                        break;
                    case "tiff":
                        url = "/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=a7461cf3-1e6a-40f8-9c0f-f684468bf9e2";
                        break;
                    case "vsd":
                        url = "/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=c4b72d21-f070-4514-9beb-5bd562bb1c5e";
                        break;
                    case "vsdx":
                        url = "/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=11935fd5-93df-463d-bf80-70fb63d18ed7";
                        break;
                    case "xls":
                        url = "/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=7f0e796b-55c7-45a5-b009-dc6730669c0c";
                        break;
                    case "xlsx":
                        url = "/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=88aa2de8-cdfd-464b-95a9-372d55841db4";
                        break;
                    default:
                        url = "/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=0b65a60c-6c6a-43a0-bab7-b5881dd97261";
                        break;
                }
                return url;
            }
        }
    });

    vm.getMyCheckOut();
    vm.getTodoList();
</script>
